<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Two Kill One!</title>
    <link rel="stylesheet" href="style.css">
    <script src="./value.js"></script>
    <script src="./case.js"></script>
    <script src="./game.js"></script>
    <script>
        let player1 = new Player(Player.BLACK, false);
        let player2 = new Player(Player.WHITE, true); // AI 玩家
        let game = new Game(player1, player2).start();

        window.onload = main;

        function main() {
            updateUI(game);
            AIMove(game, 800);
            document.getElementById("board").addEventListener("click", e => {
                let option = { target: parseInt(e.target.id) }
                let player = game.getCurrentPlayer();
                if (!player.isAI) {
                    let action = player.getAction(game, option);
                    game.excute(action);
                    AIMove(game, 800);
                }
                updateUI(game);
                showAlert(game);
            });

            document.getElementById("restart").addEventListener("click", () => {
                game = new Game(player1, player2).start();
                AIMove(game, 800);
                updateUI(game);
            });

            document.getElementById("retract").addEventListener("click", () => {
                if (game.retract()) {
                    updateUI(game);
                } else {
                    alert("没有可悔棋了");
                }
            });
        }

        function AIMove(game, time) {
            let cp = game.getCurrentPlayer();
            if (!cp.isAI || game.status !== Game.RUN) {
                //console.log("It's not AI's turn!");
                return 0;
            } else {
                setTimeout(() => {
                    game.excute(cp.getAction(game));
                    updateUI(game);
                    showAlert(game);
                    AIMove(game, time);//AI的自我博弈
                }, time);
            }
        }

        function updateUI(game) {
            let info = document.getElementById("info");
            let player = game.getCurrentPlayer();
            let playerName = '';
            switch (player.type) {
                case Player.BLACK: playerName = "黑棋"; break;
                case Player.WHITE: playerName = "白棋"; break;
            }
            for (let i = 0; i < game.board.getSize() * game.board.getSize(); i++) {
                let cell = document.getElementById(i);
                let className = '';
                switch (game.board.getCell(i)) {
                    case Player.BLACK: className = "black"; break;
                    case Player.WHITE: className = "white"; break;
                }
                cell.className = className;
            }
            if (game.winner) {
                let winnerName = '';
                switch (game.winner.type) {
                    case Player.BLACK: winnerName = "黑棋"; break;
                    case Player.WHITE: winnerName = "白棋"; break;
                }
                info.innerHTML = `${winnerName}赢了!`;
            } else if (game.status === Game.TIE) {
                info.innerHTML = "平局!";
            } else {
                info.innerHTML = `${playerName}下棋`;
            }
        }

        function showAlert(game) {
            game.items.forEach(item => {
                let message = document.createElement('div');
                message.classList.add('alert');
                message.innerText = item;
                document.getElementById('toast').appendChild(message);
                setTimeout(() => {
                    message.remove();
                }, 1500);
            });
        }
    </script>
</head>

<body>
    <div id="info"></div><!-- 顶部提示栏，提示当前执手方、胜负状态-->
    <div id="toast"></div><!-- 消子弹窗 -->
    <table id="board">
        <tr>
            <td id="0"></td>
            <td id="1"></td>
            <td id="2"></td>
            <td id="3"></td>
        </tr>
        <tr>
            <td id="4"></td>
            <td id="5"></td>
            <td id="6"></td>
            <td id="7"></td>
        </tr>
        <tr>
            <td id="8"></td>
            <td id="9"></td>
            <td id="10"></td>
            <td id="11"></td>
        </tr>
        <tr>
            <td id="12"></td>
            <td id="13"></td>
            <td id="14"></td>
            <td id="15"></td>
        </tr>
    </table>
    <div class="btns">
        <button id="restart" class="btn">重开</button>
        <button id="retract" class="btn">悔棋</button>
    </div>
</body>

</html>